<style lang="scss" scoped>
    .login{
        height: 100vh;
        overflow: hidden;
        .head{
            width: 100%;
            height: 25vh;
            padding-bottom: 10vh;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(to bottom, rgb(50, 134, 255), rgb(29, 70, 245));;
            img{
                width: 90px;
                height: 90px;
                border-radius: 50%;
            }
            div{
                position: absolute;
                background-color: #fff;
                height: 200px;
                &:nth-child(2){
                    width: 111px;
                    height: 200px;
                    background-color: #fff;
                    top: 160px;
                    border-radius: 50%;
                    left: -74px;
                }
                &:nth-child(3){
                    width: 161px;
                    height: 200px;
                    background-color: #fff;
                    top: 183px;
                    border-radius: 50%;
                    left: -15px;
                }
                &:nth-child(4){
                    width: 227px;
                    height: 200px;
                    background-color: #fff;
                    top: 186px;
                    border-radius: 50%;
                    left: 83px;
                }
                &:nth-child(5){
                    width: 161px;
                    height: 200px;
                    background-color: #fff;
                    top: 183px;
                    border-radius: 50%;
                    right: -6px;
                }
                &:nth-child(6){
                    width: 111px;
                    height: 200px;
                    background-color: #fff;
                    top: 169px;
                    border-radius: 50%;
                    right: -70px;
                }
            }
        }
        .list{
            padding: 0 4%;
            position: relative;
            z-index: 1;
            .item{
                width: 96%;
                height: 45px;
                line-height: 45px;
                padding: 5px 2%;
                border-bottom: 1px solid #ccc;
            }
        }
        .btn{
            padding: 0 4%;
            margin-top: 25px;
            text-align: center;
            a{
                color: #2d8cf0;
            }
        }
    }
</style>
<template>
    <div class="login">
        <div class="head">
            <img src="../../assets/logo.jpg" alt="">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="list">
            <div class="item" v-for="item in arr" :key="item.key">
                <p-input
                    :icon="item.icon"
                    v-model="obj[item.key]" 
                    :placeholder="item.placeholder" 
                    :type="item.type"
                    :img="item.show === true ? ercodes.data : ''"
                />
            </div>
        </div>
        <!-- 
            <van-button round type="info" block>登录</van-button> 
            相当于
            <van-button :round="true" type="info" :block="true">登录</van-button>
        -->
        <div class="btn">
            <van-button @click="submit()" round type="info" block>登录</van-button>
        </div>
        <div class="btn">
            <router-link to="/register">
                没有账号，去注册
            </router-link>
        </div>
    </div>
</template>
<script>
import {
    login
} from '@/api'
// 导入mixin对象
import myMiXin from '@/mixin'
export default {
    // 使用mixin混入对象
    mixins: [myMiXin],
    // 创建后的生命周期
    created(){
        // 拿到路由信息
        // 判断是否需要返回到之前的页面
        if(this.$route.query.path){
            this.comeFrom = this.$route.query.path
        }
        /* 
            $route 和 $router的区别
            $route是存放路由信息
            $router是整个路由实例，
            包含push，go 跳转路由使用，
            back()  返回上一个路由
        */
    },
    methods: {
        submit(){
            // 验证手机号
            if(!/^(?:(?:\+|00)86)?1\d{10}$/.test(this.obj.loginPhone)){
                // 使用全局的vant轻提示插件
                this.$toast('手机号不合法');
                return
            }
            // 验证密码
            if(this.obj.loginPassword.length < 6){
                // 使用全局的vant轻提示插件
                this.$toast('密码不能少于6位');
                return
            }
            // 验证码
            if(this.obj.ercode.toLowerCase() != this.ercodes.text.toLowerCase()){
                // 使用全局的vant轻提示插件
                this.$toast('请输入4位验证码');
                return
            }
            // 验证通过，调用登录接口
            login(this.obj).then(res => {
                // console.log(res.data);
                // 判断是否登陆成功
                if(res.data.code === 0){
                    // vant提示
                    this.$toast(res.data.msg)
                }else{
                    // vant提示
                    this.$toast(res.data.msg)
                    // 把服务端相应的token数据存放在本地存储，作为用户已经登录的验证信息
                    // 调用修改state的方法
                    this.$store.commit('changeState',res.data.result.token)
                    // 延迟跳转到首页
                    setTimeout(() => {
                        // 编程式导航
                        this.$router.push(this.comeFrom)
                    }, 1500);
                }
            })
        }
    },  
    data() {
        return {
            // 记录从哪个地方来的登录
            comeFrom: '/',
            arr: [
            {
                    icon: require('../../assets/user/phone.png'),
                    // key
                    key: 'loginPhone',
                    placeholder: '请输入手机号',
                    type: 'text',
                    // 是否显示右边的图片
                    show: false
                },
                {
                    icon: require('../../assets/user/password.png'),
                    // key
                    key: 'loginPassword',
                    placeholder: '请输入密码',
                    type: 'password',
                    // 是否显示右边的图片
                    show: false
                },
                {
                    icon: require('../../assets/user/ercode.png'),
                    // key
                    key: 'ercode',
                    placeholder: '请输入验证码',
                    type: 'text',
                    // 是否显示右边的图片
                    show: true
                }
            ],
            // 最后验证的数据
            obj: {
                loginPhone: '',
                loginPassword: '',
                ercode: ''
            }
        }
    },
}
</script>